<meta charset="UTF-8">
<style>
    #transfer-records .table-info-row {
        color: seagreen;
    }
    
    #transfer-records .table-error-row {
        color: #e4393c;
    }
</style>
<div id="transfer-records">
    <div style="margin:10px;height: 32px;">
        <div style="margin-left:10px;" class="fl">
            <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:200px" placement="bottom-start"></date-picker>
        </div>
        <div style="margin-left: 10px;" class="spans-wrap fl">
            <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(7)" :style="{color: dayNumberType == 7 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.sevenDays")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(30)" :style="{color: dayNumberType == 30 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.lastMonth")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(180)" :style="{color: dayNumberType == 180 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.lastHalfYear")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(365)" :style="{color: dayNumberType == 365 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.lastYear")}}</span>
        </div>
        <div style="margin-left:10px;" class="fl">
            <i-button @click="queryTransferRecords" :loading="loading">{{$t("reportForm.query")}}</i-button>
        </div>
        <div class="rt">
            <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
        <div style="margin-right: 10px;" class="rt">
            <span>{{$t("bgMgr.totalGoldenBeans")}} : {{bonuspoints}}</span>
        </div>
    </div>
    <div style="margin:10px;">
        <i-table :columns="columns" :row-class-name="rowClassName" border ref="table" :height="tableHeight" :data="tableData" :loading="loading"></i-table>
    </div>
    <div style="padding: 0 10px 10px 10px;">
        {{$t("reportForm.total")}} <span v-text="total"></span>, {{$t("bgMgr.switchOut")}}: <span v-text="switchOut"></span>, {{$t("bgMgr.switchIn")}}: <span v-text="switchIn"></span>
    </div>
    <Modal v-model="modal" width="880" v-cloak :mask-closable="false">
        <p slot="header" style="color:#2D8CF0;text-align:center">
            {{$t("charge.deviceList")}}
        </p>
        <div style="height: 401px;overflow-y: auto;position: relative;background-color: #fff;" v-if="loadingDevList">
            <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
            </Spin>
        </div>
        <div style="height: 401px;overflow-y: auto;" v-else>
            <Row style="border-top:1px solid #E8EAEC;border-left:1px solid #E8EAEC;">
                <i-col span="1" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">序号</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">设备名称</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">设备序号</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">设备类型</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">金豆数</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">续费年数</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">总金豆数</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">充值时间</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">充值前</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">充值后</i-col>
            </Row>
            <Row style="border-left:1px solid #E8EAEC;" v-for="item in deviceids" :key="item">
                <i-col span="1" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.index}}</i-col>
                <i-col span="3" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.devicename}}</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.deviceid}}</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.devicetypename}}</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.peryearpoints}}</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.chargeyears}}</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.chargepoints}}</i-col>
                <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.chargetime}}</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.preoverduetime}}</i-col>
                <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.postoverduetime}}</i-col>
            </Row>
        </div>
        <div slot="footer" style="padding:6.5px 15px;">
            <Row>
                <i-col span="11">
                    <i-button style="width:100%;" type="primary" @click="modal=false">{{$t("monitor.confirm")}}</i-button>
                </i-col>
                <i-col span="11" :offset="2">
                    <i-button style="width:100%;" type="primary" @click="exportDataModal">{{$t("reportForm.exportData")}}</i-button>
                </i-col>
            </Row>
        </div>
    </Modal>
    <script>
        vueInstanse = new Vue({
            el: '#transfer-records',
            i18n: utils.getI18n(),
            data: {
                total: 0,
                switchOut: 0,
                switchIn: 0,
                dayNumberType: 0,
                clearable: false,
                loadingDevList: false,
                modal: false,
                dateVal: [DateFormat.longToDateStr(Date.now(), timeDifference), DateFormat.longToDateStr(Date.now(), timeDifference)],
                columns: [{
                    type: 'index',
                    width: 60,
                }, {
                    title: vRoot.$t("bgMgr.event"),
                    key: 'eventtypeStr',
                    width: 85,
                    sortable: true,
                }, {
                    title: vRoot.$t("bgMgr.type"),
                    key: 'assigntypeStr',
                    width: 85,
                    sortable: true,
                }, {
                    title: vRoot.$t("bgMgr.operationTime"),
                    key: 'createtimeStr',
                    width: 150,
                    sortable: true,
                }, {
                    title: isZh ? "对方账号" : "Beneficiary Account",
                    key: 'otherusername',
                    sortable: true,
                }, {
                    title: vRoot.$t("bgMgr.operatingGoldenBeans"),
                    key: 'points',
                    sortable: true,
                }, {
                    title: vRoot.$t("bgMgr.beforeJindou"),
                    key: 'prepoints',
                    sortable: true,
                }, {
                    title: vRoot.$t("bgMgr.afterJindou"),
                    key: 'postpoints',
                    sortable: true,
                }, {
                    title: vRoot.$t("customer.remark"),
                    key: 'remark',
                }, {
                    title: vRoot.$t("charge.deviceList"),
                    width: 88,
                    render: function(h, params) {
                        var devicechargeuuid = params.row.devicechargeuuid;
                        return h(
                            'Button', {
                                on: {
                                    click: function() {
                                        vueInstanse.queryChargeDevices(devicechargeuuid);
                                    }
                                },
                                props: {
                                    size: 'small',
                                    type: 'primary'
                                }
                            },
                            vRoot.$t("charge.see")
                        )
                    },
                }],
                tableHeight: 300,
                tableData: [],
                loading: false,
                bonuspoints: 0,
                deviceids: [],
            },
            methods: {
                queryChargeDevices: function(devicechargeuuid) {
                    this.loadingDevList = true;
                    var me = this;
                    var url = myUrls.queryChargeDevices();
                    var data = {
                        devicechargeuuid: devicechargeuuid
                    };
                    utils.sendAjax(url, data, function(respData) {
                        var deviceids = [];
                        var records = respData.records;
                        if (records && records.length) {
                            records.forEach(function(item, index) {
                                deviceids.push({
                                    index: index + 1,
                                    deviceid: item.deviceid,
                                    devicename: item.devicename ? item.devicename : item.deviceid,
                                    devicetypename: item.devicetypename,
                                    peryearpoints: item.peryearpoints,
                                    chargeyears: item.chargeyears,
                                    chargepoints: item.chargepoints,
                                    preoverduetime: DateFormat.longToDateStr(item.preoverduetime, timeDifference),
                                    chargetime: DateFormat.longToDateStr(item.chargetime, timeDifference),
                                    postoverduetime: DateFormat.longToDateStr(item.postoverduetime, timeDifference),
                                })
                            })
                        };
                        me.deviceids = deviceids;
                        setTimeout(function() {
                            me.loadingDevList = false;
                        }, 100)
                    }, function() {
                        me.loadingDevList = false;
                    })
                    this.modal = true;
                },
                rowClassName: function(row, index) {
                    if (row.assigntype === 0) {
                        return 'table-info-row';
                    } else if (row.assigntype === 1) {
                        return 'table-error-row';
                    }
                    return '';
                },
                handleSelectdDate: function(dayNumber) {
                    this.dayNumberType = dayNumber;
                    var dayTime = 24 * 60 * 60 * 1000;
                    if (dayNumber == 0) {
                        this.dateVal = [DateFormat.longToDateStr(Date.now(), timeDifference), DateFormat.longToDateStr(Date.now(), timeDifference)];
                    } else if (dayNumber == 1) {
                        this.dateVal = [DateFormat.longToDateStr(Date.now() - dayTime, timeDifference), DateFormat.longToDateStr(Date.now() - dayTime, timeDifference)];
                    } else {
                        this.dateVal = [DateFormat.longToDateStr(Date.now() - dayTime * (dayNumber - 1), timeDifference), DateFormat.longToDateStr(Date.now(), timeDifference)];
                    }
                },
                onChange: function(value) {
                    this.dateVal = value;
                },
                queryTransferRecords: function() {
                    var me = this;
                    var url = myUrls.queryPointsRecord();
                    var data = {
                        startday: DateFormat.format(new Date(this.dateVal[0]), 'yyyy-MM-dd'),
                        endday: DateFormat.format(new Date(this.dateVal[1]), 'yyyy-MM-dd'),
                        offset: timeDifference
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            var total = 0;
                            var switchIn = 0;
                            var switchOut = 0;
                            var records = resp.records;
                            records.sort(function(a, b) {
                                return b.createtime - a.createtime;
                            });
                            records.forEach(function(item) {
                                total += item.points;
                                item.assigntypeStr = item.assigntype === 0 ? vRoot.$t("bgMgr.switchIn") : vRoot.$t("bgMgr.switchOut");
                                item.eventtypeStr = item.eventtype === 0 ? vRoot.$t("bgMgr.transfer") : vRoot.$t("bgMgr.renew");
                                item.createtimeStr = DateFormat.longToLocalDateTimeStr(item.createtime);
                                item.detailuuid = item.detailuuid ? item.detailuuid : "";
                                if (item.assigntype === 0) {
                                    switchIn += item.points;
                                } else {
                                    switchOut += item.points;
                                }
                            });
                            me.total = total;
                            me.switchIn = switchIn;
                            me.switchOut = Math.abs(switchOut);
                            me.records = records;
                            me.tableData = records;
                        }
                    });
                },
                exportData: function() {
                    var data = [
                        [
                            vRoot.$t("reportForm.index"),
                            vRoot.$t("bgMgr.event"),
                            vRoot.$t("bgMgr.type"),
                            vRoot.$t("bgMgr.operationTime"),
                            isZh ? "对方账号" : "Beneficiary Account",
                            vRoot.$t("bgMgr.operatingGoldenBeans"),
                            vRoot.$t("bgMgr.beforeJindou"),
                            vRoot.$t("bgMgr.afterJindou"),
                            vRoot.$t("customer.remark"),
                        ]
                    ];
                    this.records.forEach(function(item, index) {
                        var itemArr = [];
                        itemArr.push(index + 1);
                        itemArr.push(item.eventtypeStr);
                        itemArr.push(item.assigntypeStr);
                        itemArr.push(item.createtimeStr);
                        itemArr.push(item.otherusername);
                        itemArr.push(item.points);
                        itemArr.push(item.prepoints);
                        itemArr.push(item.postpoints);
                        itemArr.push(item.remark);
                        data.push(itemArr);
                    });
                    var options = {
                        title: vRoot.$t('bgMgr.transferRecords'),
                        data: data,
                    }
                    new XlsxCls(options).exportExcel();

                },
                exportDataModal() {
                    var data = [
                        [
                            vRoot.$t("reportForm.index"),
                            '设备名称',
                            '设备序号',
                            '设备类型',
                            '金豆数',
                            '续费年数',
                            '总金豆数',
                            '充值时间',
                            '充值前',
                            '充值后',
                        ]
                    ];
                    this.deviceids.forEach(function(item, index) {
                        var itemArr = [];
                        itemArr.push(index + 1);
                        itemArr.push(item.devicename);
                        itemArr.push(item.deviceid);
                        itemArr.push(item.devicetypename);
                        itemArr.push(item.peryearpoints);
                        itemArr.push(item.chargeyears);
                        itemArr.push(item.chargepoints);
                        itemArr.push(item.chargetime);
                        itemArr.push(item.preoverduetime);
                        itemArr.push(item.postoverduetime);
                        data.push(itemArr);
                    });
                    var options = {
                        title: '续费记录',
                        data: data,
                    }
                    new XlsxCls(options).exportExcel();
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.tableHeight = wHeight - 155;
                },
                queryBonusByUsername: function() {
                    var me = this;
                    var url = myUrls.queryBonusByUsername();
                    utils.sendAjax(url, {}, function(resp) {
                        if (resp.status == 0) {
                            me.bonuspoints = resp.bonuspoints
                        }
                    })
                }
            },
            mounted: function() {
                var me = this;
                this.calcTableHeight();
                this.queryTransferRecords();
                this.queryBonusByUsername();
                this.records = [];
                window.onresize = function() {
                    me.calcTableHeight();
                }
            },
        })
    </script>
</div>